<!--*************************************
* @update: xxx_日期  xxxx_谁开发  [创建文件]
* 
* @description: 组件的属性配置页
****************************************-->
    
<template>
    <div class='comp-config'>
        <a-collapse v-model:activeKey='activeKey'
            :accordion='accordion'>
            <a-collapse-panel key='1'
                v-if='myAttrConfig[0]'
                :header='myAttrConfig[0].des'>
                <a-form :labelCol='labelCol'
                    :wrapperCol='wrapperCol'
                    :labelAlign='labelAlign'>

                    <!-- 下拉选项框: 样例 -->
                    <!-- <a-form-item label='字体类型'>
                        <a-select v-model:value='myAttrConfig[0].fontFamily'
                            placeholder='请选择'>
                            <a-select-option value='Microsoft YaHei'>微软雅黑</a-select-option>
                        </a-select>
                    </a-form-item> -->

                    <!-- 输入框: 样例 [suffix后缀, prefix前缀]-->
                    <!-- <a-form-item label='字体大小'>
                        <a-input v-model:value='myAttrConfig[0].fontSize' suffix='px'/>
                    </a-form-item> -->

                    <!-- 摆放两个或更多 -->
                    <!-- <a-form-item label='xxx'>
                        <a-space>
                            <a-input v-model:value='myAttrConfig[0].fontSize' suffix='px'/>
                            <a-input v-model:value='myAttrConfig[0].fontSize' suffix='px'/>
                        </a-space>
                    </a-form-item> -->

                    <!-- 带有解释说明 -->
                    <!-- <a-form-item label='文字说明'>
                        <a-row>
                            <a-col :span="21">
                                <a-input v-model:value='myAttrConfig[0].logoText' />
                            </a-col>

                            <a-col :span="3">
                                <a-tooltip placement="top">
                                    <template #title>
                                        <div>xxxx说明</div>
                                    </template>
                                    <div class="iconfont icon-edit_bangzhu_default ml-5"></div>
                                </a-tooltip>
                            </a-col>
                        </a-row>
                    </a-form-item> -->

                    <!-- 开关: 样例 -->
                    <!-- <a-form-item label='自动更新'>
                        <a-switch v-model:checked='copyDataConfig.isAutoUpdate' />
                    </a-form-item> -->

                    <!-- 颜色配置: 样例 -->
                    <!-- useType 的取值: 'pure'只显示纯色; 'gradient'只显示渐变色; 'both'显示纯色和渐变色 -->
                    <!-- <a-form-item label='颜色配置'>
                        <vcloudColorPicker v-model:color='myAttrConfig[0].color'
                            useType='pure'
                            @changeColor='' />
                    </a-form-item> -->

                    <!-- 上传图片: 样例 -->
                    <!-- <a-form-item label='背景图片'>
                        <aUploadImg v-model:imgSrc='myAttrConfig[0].backgroundImage'></aUploadImg>
                    </a-form-item> -->

                    <!-- 文本框 -->
                    <!-- <a-form-item label='自定义style'>
                        <a-textarea v-model:value='myAttrConfig[0].style' placeholder='display: block;&#10;font-size: 16px;' :rows='3' />
                    </a-form-item> -->

                </a-form>
            </a-collapse-panel>

            <!-- 嵌套: 样例 -->
            <!-- <a-collapse-panel key='2'
                v-if='myAttrConfig[1]'
                :header='myAttrConfig[1].des'>
                <a-form :labelCol='labelCol'
                    :wrapperCol='wrapperCol'
                    :labelAlign='labelAlign'>

                    <a-form-item label='内半径'>
                        <a-input v-model:value='myAttrConfig[1].innerRadius' />
                    </a-form-item>

                    <a-collapse :accordion='accordion'>
                       <a-collapse-panel key='1' header='轴名称'>
                            <a-form :labelCol='labelCol'
                                :wrapperCol='wrapperCol'
                                :labelAlign='labelAlign'>
                                <a-form-item label='名称'>
                                    <a-input v-model:value='`值`' />
                                </a-form-item>
                            </a-form>
                        </a-collapse-panel>
                    </a-collapse>

                </a-form>
            </a-collapse-panel> -->

            <!-- 配置数据 -->
            <a-collapse-panel key='99'
                header='配置数据'
                v-if="showConfigData">
                <a-form :labelCol='{ span: 0 }'
                    :wrapperCol='{ span: 24 }'
                    :labelAlign='labelAlign'>
                    <a-form-item label=''>
                        <a-textarea v-model:value='attrConfigStr'
                            placeholder=''
                            :rows='25' />
                    </a-form-item>
                </a-form>

                <!-- 按钮 -->
                <a-row class='mt-20 mb-10'>
                    <a-col :span='8'
                        :offset='16'>
                        <a-button type='primary'
                            @click='updateConfig'>更新配置</a-button>
                    </a-col>
                </a-row>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>
    
<script>
import attrConfigMixin from 'tools/mixins/1_attrConfigMixin'
import attrConfig from './attrConfig'

// 颜色选择器
// import vcloudColorPicker from 'tools/components/6_vcloudColorPicker'

// 上传图片
// import aUploadImg from 'tools/components/3_aUploadImg'

// 字体类型
// import fontTypes from 'assets/font/fontTypes'

// 字体粗细
// import fontWeight from 'assets/font/fontWeightOption'

export default {
	des: 'xx组件配置页',
	name: 'xxAttr', //组件名称 + Attr (注:必须是组件的name字段值拼接上"Attr")
	components: {
		// vcloudColorPicker,
		// aUploadImg
	},
	mixins: [attrConfigMixin],
	props: {
		//接收传递过来的attrConfig
		attrConfig: {
			type: Array,
			default: () => attrConfig()
		},
		// 颜色主题
		themeConfig: {
			type: Object,
			default: () => ({})
		}
	},
	setup(props, { attrs, slots, emit }) {},
	data() {
		return {
			// fontTypes: fontTypes(),
			// fontWeight: fontWeight(),
		}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	methods: {},
	beforeUnmount() {}
}
</script>
    
<style scoped lang='less'>
.comp-config {
	width: 100%;
	height: 100%;
}
</style>